<template>
  <!--搜索相关-->
  <div class="searchClass">
    <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 100px">
            <el-option v-for="item in tagList" :key="item.id" :label="item.tagName" :value="item.id">{{item.tagName}}</el-option>
          </el-select>
      <el-button slot="append" icon="el-icon-search" @click="searchArticle(select, input)"></el-button>
    </el-input>
  </div>
</template>

<script>

import {getAllTags} from '@/api/tag'

export default {
  name: "Search",
  data() {
    return {
      tagList: [],
      input: '',
      select: ''
    }
  },
  created(){
    // 生命周期钩子函数,在组件创建后获取所有标签
    this.getAllTags();
  },
  methods: {
    // 搜索
    searchArticle(select, keyword) {

    },
    // getAllTags() {
    //   getAllTags();
    // },
    //获取标签

    getAllTags() {
      let that = this
      getAllTags().then(data => {
        // 获取所有标签
        that.tagList = data.data
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '标签加载失败!', showClose: true})
        }

      })
    },
  }
}
</script>

<style scoped>

.searchClass {
  width: 640px;
  margin-bottom: 10px;
}

.el-select .el-input {
  width: 130px;
}
.input-with-select {
  background-color: #fff;
}
</style>
